<template>
    <el-dialog v-model="state.show" :title="state.title" width="600px" destroy-on-close @closed="onClosed">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" @submit.prevent>
            <el-form-item :label="state.labelName" prop="categoryName">
                <el-input
                    v-model.trim="form.categoryName"
                    maxlength="20"
                    :placeholder="`输入${state.labelName}`"
                    clearable
                    show-word-limit />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.show = false">取消</el-button>
            <el-button type="primary" @click="onConfirm(formRef)"> 确定 </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({}) },
    oneList: { type: Array, default: () => [] },
    twoList: { type: Array, default: () => [] }
});

const emit = defineEmits(['confirm']);
const state = reactive({
    show: false,
    title: '',
    labelName: ''
});

const formRef = ref(null);
const form = reactive({
    categoryName: '' // 驳回原因
});
const rules = {
    categoryName: [
        { required: true, message: '请输入分组名称', trigger: ['blur', 'change'] },
        { min: 1, max: 20, message: '分组名称不可超过20个字符', trigger: 'blur' }
    ]
};

const onClosed = () => {
    form.categoryName = '';
};
const onClose = () => {
    state.show = false;
    emit('success');
};
const closeHandle = () => {};
const add = async () => {
    const params = {
        shopId: props.data.shopId,
        categoryName: form.categoryName,
        level: form.level || 1,
        parentId: form.parentId,
        isDefault: 2
    };
    await request('AddCategoryServ', params);
    ElMessage.success('新增成功');
    onClose();
};
const edit = async () => {
    let params = {
        shopId: form.shopId,
        categoryId: form.id,
        categoryName: form.categoryName
    };
    await request('upDateCategoryServ', params);
    ElMessage.success('编辑成功');
    onClose();
};

const onConfirm = async formEl => {
    if (!formEl) return;
    await formEl.validate();
    state.type === 'add' ? add() : edit();
};
const openDialog = query => {
    const { type, level, id, categoryName, parentId } = query;
    state.type = type;
    // level:1-父新增,2-子新增
    if (type === 'add') {
        if (level === 1) {
            state.title = '新增分组';
            state.labelName = '分组名称';
            rules.categoryName[0].message = '请输入分组名称';
        } else {
            state.title = '新增子分组';
            state.labelName = '子分组名称';
            rules.categoryName[0].message = '请输入子分组名称';
        }
        form.parentId = id;
    }
    if (type === 'edit') {
        if (level === 1) {
            state.title = '编辑分组';
            state.labelName = '分组名称';
            rules.categoryName[0].message = '请输入分组名称';
        } else {
            state.title = '编辑子分组';
            state.labelName = '子分组名称';
            rules.categoryName[0].message = '请输入子分组名称';
        }
        form.categoryName = categoryName;
        form.parentId = parentId;
        form.id = id;
    }
    form.shopId = props.data.shopId;
    form.level = level;
    state.show = true;
};
defineExpose({
    openDialog
});
</script>
<style lang="scss" scoped>
:deep(.el-form-item__error) {
    margin-top: 4px;
}
.what {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 14px;
}
</style>
